<template>
    <div class="template-bg">
        <div class="show-card" v-for="item, index in list" :key="index">
            <div class="card-title">
                <i></i>{{ item.title }}
            </div>
            <div class="card-content" v-html="item.template">
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [
                {
                    title: '1. 利用双重for循环去重',
                    template: `
            <pre><code>
                // 定义一个新数组，先存放不可能与arr重复的第一个元素
            let newArr = [arr[0]];
            for (let i = 1; i < arr.length; i++) {
                // 设置标记flag
                let flag = true;
                for (let j = 0; j < newArr.length; j++) {
                    // 如果两个相等，标记该i为false(重复),并退出该循环
                    if (arr[i] == newArr[j]) {
                        flag = false;
                        break;
                    }
                }
                // 第二个for遍历完成后，flag为true(无重复)加进新数组
                if (flag == true) {
                    newArr.push(arr[i]);
                }
            }
                </code></pre>
        `
                }, {
                    title: '2. 利用includes去重',
                    template: `
            <pre><code><p>includes() 存在该值返回true，反之false</p>
            let newArr = [];
            for (var i = 0, len = arr.length; i < len; i++) {
                if (!newArr.includes(arr[i])) {
                    newArr.push(arr[i]);
                }
            }
            console.log(newArr);</code></pre>
        `
                }, {
                    title: '3. 利用数组的filter方法去重',
                    template: `
            <pre><code>
                // filter() 使用指定的函数测试所有元素，
                并返回一个包含所有通过测试元素的新数组
            // indexof() 可返回某个指定的字符串值在字符串中首次出现的位置。
            如果没有检索到指定字符串，则返回-1
            let newArr = arr.filter((item, index) => {
                return arr.indexOf(item) === index;
            });
            console.log(newArr);</code></pre>
        `
                }, {
                    title: '4. 利用ES6中的 Set 方法去重（最常用）',
                    template: `
            <pre><code>// new Set(arr) 得到一个去重的set对象
            // 通过 [] + 展开运算符 变成数组格式
            console.log([...new Set(arr)]);</code></pre>
        `
                }, {
                    title: '5. 利用indexOf去重',
                    template: `
            <pre><code>let newArr = [];
            for (let i = 0; i < arr.length; i++) {
                // 检索新数组中是否有重复元素，没有就push进新数组
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            console.log(newArr);</code></pre>
        `
                }, {
                    title: '6. 利用ES6中的 Map 方法去重',
                    template: `
            <pre><code>
                // 创建一个空Map数据结构，遍历需要去重的数组，
                把数组的每一个元素作为key存到Map中
            // 由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果
            let map = new Map();
            let newArr = [];
            for (let i = 0; i < arr.length; i++) {
                if (map.has(arr[i])) {
                    map.set(arr[i], true); // true 或 false都没影响
                } else {
                    map.set(arr[i], false);
                    newArr.push(arr[i]);
                }
            }
            console.log(newArr);</code></pre>
        `
                }
            ]

        }
    },

};
</script>
<style lang='less' scoped>
.template-bg {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .show-card {
        width: 600px;
        height: 400px;
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        border-radius: 8px;
        margin: 8px;
        padding: 10px;
        box-sizing: border-box;

        .card-title {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-weight: 600;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;

            i {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: rgba(0, 101, 182, 0.85);
                margin-right: 4px;
            }
        }

        .card-content {
            width: 100%;
            margin-top: 10px;
        }
    }
}
</style>